<template>
  <div class="video-tools">
    <video
      style="width:100%;"
      :id="'video_' + id"
      :poster="poster"
      :controls="control"
    >
      <source :src="url" />
      您的浏览器不支持Video标签。
    </video>
    <mu-icon
      class="play-icon"
      size="50"
      v-show="!play"
      @click="playVideo"
      value="play_circle_outline"
    ></mu-icon>
  </div>
</template>
<script>
export default {
  props: ["poster", "url", "id"],
  data() {
    return {
      play: false,
      control: false,
    };
  },
  methods: {
    playVideo() {
      this.control = true;
      this.play = true;
      let ele = document.getElementById("video_" + this.id);
      ele.play();
      ele.addEventListener("pause", () => {
        this.control = false;
        this.play = false;
      });
    },
  },
};
</script>

<style lang="less">
.video-tools {
  position: relative;
  width: 400px;
  .play-icon {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    margin-top: -25px;
    margin-left: -25px;
  }
}
</style>
